<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width:300px;height: 300px;background-color: red;overflow: hidden;
    }
    .box .xbox{width: 100px;height: 100px;background: green;margin: 50px;}
  </style>
</head>
<body style="height:1000px;">
  <div class="box">
    <div class="xbox"></div>
  </div>
</body>
<script>

  var box = document.querySelector(".box")

  box.onmousedown = function(eve){
    var e = eve || window.event;
    // 相对于 事件目标 的坐标
    // console.log(e.offsetX, e.offsetY);

    // 相对于 浏览器可视区域 的坐标
    // console.log(e.clientX, e.clientY);

    // 相对于 页面 的坐标
    // console.log(e.pageX, e.pageY);
    
    // 相对于 显示器 的坐标
    // console.log( e.screenX, e.screenY );

    // 事件类型
    // console.log( e.type );

    // 鼠标键码：左0，中1，右2
    // console.log( e.button );

    // 事件目标：触发事件的元素
    // console.log( e.target );
    // console.log( e.srcElement );
    // 兼容处理
    // console.log( e.target || e.srcElement );
  }
  
</script>
</html>